import React, { useState } from 'react';
import './Actualshooting.css';
import e1 from '../../public/img/e1.png'
const tabs = ['精选推荐', '大气航拍', '热门城市实拍'];

const cardData = {
  '精选推荐': [
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.ZLr9rwDPv0JBMnC-3crzFwHaEK?w=321&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '夏季氛围实拍', count: '共76个作品' },
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.cTKULydz3DH529v6VEhAaQAAAA?w=265&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '交通车流航拍', count: '共40个作品' },
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.IaIL-9LH-kN3nMsBztWiZgAAAA?w=295&h=197&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '金融理财实拍', count: '共32个作品' },
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.TgWHQDzANawey1X021JU8AHaEK?w=305&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '逆光植物实拍', count: '共54个作品' },
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.mCUpVJZdqd7knJAy_Ymp6AHaE8?w=264&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '夏季休闲人像', count: '共92个作品' },
    { img: '', title: '清凉冷饮实拍', count: '共24个作品' },
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ZJlwCUhXqWFvQLcTtu7nqAAAAA?w=115&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '水果蔬菜实拍', count: '共32个作品' },
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.XoMuWW73i6Ul27dKDNZ-SAHaFj?w=215&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7', title: '文娱演出实拍', count: '共40个作品' },
  ],
  '大气航拍': [
    // 你可以替换为其他图片和内容
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.yUQCMsmRwASLLHG-FV4rlQHaE7?w=260&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '森林山脉风格航拍', count: '共20个作品' },
    { img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.FhNz8Sn7KyuE-qW9IEG0LQHaE7?w=258&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '江河湖泊风光航拍', count: '共30个作品' },
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.uznWzvxbCk9EzbGZ2niHIwHaFQ?w=242&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '草原风光景象航拍', count: '共15个作品' },
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ALPDtGlGiqvlIMI6X6PGdQAAAA?w=238&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '海洋风光景象航拍', count: '共18个作品' },
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.4qp6Oz6oE5Y1dLEHlaITtwHaEO?w=315&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '沙漠戈壁风光航拍', count: '共22个作品' },
    { img: '', title: '灯光夜景航拍', count: '共12个作品' },
    { img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.LNz8z0H3vGpeTDayLa0e-AHaFj?w=245&h=184&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '绿色乡村航拍', count: '共17个作品' },
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.kBCe9XpEk3mF2QxN1txUmwHaEd?w=298&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '雪山高原风光航拍', count: '共19个作品' },
  ],
  '热门城市实拍': [
    // 你可以替换为其他图片和内容
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.YDHqbOzrqtaVgv0xl9Am2QHaEK?w=290&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '北京古迹航拍', count: '共10个作品' },
    { img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.F_fgWb92cgTXr4kBCHjO3wHaEK?w=305&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '上海城市航拍', count: '共20个作品' },
    { img: '', title: '重庆城市航拍', count: '共30个作品' },
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.3RWqFOD8DrE1z6kUOU2SfwHaEK?w=301&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '香港城市航拍', count: '共40个作品' },
    { img: '', title: '天津城市航拍', count: '共50个作品' },
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.5eOnllYBjpW-l-qMQ6j2_QHaEK?w=300&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '广州城市航拍', count: '共60个作品' },
    { img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Uu9UycnPVij5gNb1szaA0gHaE7?w=241&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3', title: '深圳城市航拍', count: '共70个作品' },
    { img: '', title: '南京城市航拍', count: '共80个作品' },
  ],
};

function Actualshooting() {
  const [activeTab, setActiveTab] = useState('精选推荐');
  const cards = cardData[activeTab as keyof typeof cardData];

  return (
    <div className="actualshooting-root">
      <div className="actualshooting-header">
        <h2 className="actualshooting-title">
        <img src={e1} alt="" className="actualshooting-e1" style={{width:'400px',height:'125px'}}/>
        </h2>
       
        <div className="actualshooting-tabs">
          {tabs.map(tab => (
            <span
              key={tab}
              className={`actualshooting-tab${activeTab === tab ? ' active' : ''}`}
              onMouseEnter={() => setActiveTab(tab)}
            >
              {tab}
            </span>
          ))}
        </div>
      </div>
      
      <div className="actualshooting-grid">
        {cards.map((card, idx) => (
          <div className="actualshooting-card" key={idx}>
            <div className="actualshooting-card-img-wrap">
              <img src={card.img} alt={card.title} className="actualshooting-card-img" />
              <div className="actualshooting-card-play">
                <svg width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="rgba(0,0,0,0.3)"/><polygon points="20,16 34,24 20,32" fill="#fff"/></svg>
              </div>
            </div>
            <div className="actualshooting-card-bottom">
              <span className="actualshooting-card-title">{card.title}</span>
              <span className="actualshooting-card-count">{card.count}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Actualshooting;
